<template>
    <div class="cb-footer">
        <div class="cp-container">
            <el-row class="ft-boxhd">
                <el-col :span="4" class="ft-one">
                    <div style="font-size:14px;color:#ccc;">
                        {{isType === 'institute' ? '设计师' : '平台指南'}}
                        <br>
                        <span v-if="isType === 'qiao'" style="margin-top:5px;display: inline-block;" @click="handleJump({r: '/business/shop', m: 'BE_SUPPLY', n: '商户入驻'})">商户入驻</span>
                        <template v-for="(ite, ind) in communityLinks">
                            <span v-if="!ite.d && isType === 'institute'" :key="ind" style="margin-top:5px;display: block;" @click="handleJump(ite)">
                                {{ite.e || ite.n}}
                            </span>
                        </template>
                    </div>
                </el-col>
                <el-col :span="0.1">
                    <div class="ft-line"></div>
                </el-col>
                <el-col :span="6" class="ft-two">
                    <ul class="xf-box">
                        <li class="gf">{{isType === 'community' ? '专家' : isType === 'qiao' ? '供方' : '服务商'}}</li>
                        <template v-for="(ite, ind) in (isType !== 'community' ? serverLinks : communityLinks)">
                            <li v-if="!ite.d" :key="ind" class="jump-btn" @click="handleJump(ite)">
                                {{ite.n}}
                            </li>
                        </template>
                    </ul>
                    <ul>
                        <li class="xf">{{isType === 'community' ? '我的' : isType === 'qiao' ? '需方' : '甲方'}}</li>
                        <template v-for="(ite, ind) in (isType !== 'community' ? serverLinks : communityLinks)">
                            <li v-if="ite.d" :key="ind" class="jump-btn" @click="handleJump(ite)">
                                {{ite.n}}
                            </li>
                        </template>
                    </ul>
                </el-col>
                <el-col :span="0.1">
                    <div class="ft-line"></div>
                </el-col>
                <el-col :span="9" class="ft-three">
                    <div>
                        <div class="tel">400-6580258</div>
                        <div class="weeked">周一至周五  9:00-18:00 </div>
                    </div>
                </el-col>
                <el-col :span="0.1">
                    <div class="ft-line"></div>
                </el-col>
                <el-col :span="0.1">
                    <div class="imageCenter"><img src="~/static/img/qd/scen.png" alt=""></div>
                </el-col>
            </el-row>
            <div class="ft-main">
                <h6>友情链接</h6>
                <el-row>
                    <el-col :span="6" v-for="(li,liIndex) in platformSystem" :key="liIndex">
                        <a :href="li.linkUrl" :title="li.linkName" target="_blank" v-if="li.linkUrl">
                            <span>{{li.linkName}}</span>
                        </a>
                        <a v-else href="javascript:;" @click="handleClickNothing">
                            <span>{{li.linkName}}</span>
                        </a>
                    </el-col>
                </el-row>
            </div>
            <div class="ft-bt">
                经营许可证编号：京ICP证160269号 <a style="color: inherit" href="http://beian.miit.gov.cn" target="_blank">京ICP备14035595号-{{num}}</a> CopyRight ©2014-{{nYear}} 建筑产业工业互联网(ciip.com).All Rights Reserved
                <p>
                    <a style="color: inherit;" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010602007057" target="_blank">
                        <img style="position: relative; top: 1px; margin-right: 2px;" width="12" src="http://www.beian.gov.cn/portal/download?token=a92b0f4c-7d70-407d-9ecc-cb25dbe5090d">
                        京公网安备 11010602007057号
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import {Component, Vue, Prop} from 'nuxt-property-decorator'
import {getFrinedLink} from '~/api/servicehall'
import ValidateLoginConfirm from '~/method/confirm'
import {ciipWebUrl} from '~/../config/server.url.conf'

@Component({
    name: '',
    components: {
    }
})
export default class FooterPage extends Vue {
    @Prop({
        default: 'qiao',
        type: String
    })
    isType !: String
    val:string = ''
    num:number = 4
    nYear:any = new Date().getFullYear()
    platformSystem:any = []
    defaultData:any = []
    serverLinks: any = [
        // {
        //     n: '立即开店',
        //     r: '/business/shop'
        // },
        // {
        //     n: '店铺管理',
        //     r: '/business/shop'
        // },
        {
            n: '服务管理',
            r: '/qiao/s',
            m: 'SERVICE'
        },
        {
            n: '订单管理',
            r: '/qiao/s/order/s',
            m: 'SUPPLY_ORDER'
        },
        {
            n: '发布需求',
            r: '/qiao/d?t=second',
            m: 'DEMAND',
            d: true
        },
        {
            n: '订单管理',
            r: '/me/order/d',
            m: 'DEMAND_ORDER',
            d: true
        }
    ]
    communityLinks: any = [
        {
            n: '成为专家',
            e: '成为设计师',
            r: '/community/expert',
            m: 'BE_EXPERT'
        },
        {
            n: '我的服务',
            r: '/community/serve',
            m: 'EXPERT_SERVICE'
        },
        // {
        //     n: '专家设置',
        //     r: '/community/expert'
        // },
        {
            n: '我的话题',
            r: '/community/quan',
            m: 'TOPIC',
            j: true,
            d: true
        },
        {
            n: '我的文章',
            r: '/community/article',
            m: 'NEWS',
            d: true
        },
        {
            n: '我的收藏',
            r: '/me/collect',
            m: 'FAVORITE',
            d: true
        },
        {
            n: '我的关注',
            r: '/me/focus/expert',
            m: 'FOLLOW',
            d: true
        }
    ]
    async mounted () {
        let res = null
        try {
            res = await getFrinedLink()
        } catch (e) {}
        if (res && res.data && res.data.code >= 0 && res.data.data.length > 0) {
            this.platformSystem = res.data.data
        } else {
            this.platformSystem = this.defaultData
        }
    }
    handleJump (item: any) {
        if (item.j) {
            this.$router.push({
                path: item.r
            })
        } else {
            const confirm = new ValidateLoginConfirm({that: this})
            confirm.toJumpUc(item.m, item.r, item.n)
        }
    }
    validateLoginConfirm () {
        const confirm = new ValidateLoginConfirm({that: this})
        confirm.validateLoginConfirmForParams(
            '您尚未登录，请选登录！',
            '立即登录',
            ciipWebUrl + '/login?redirectUrl=' + window.location.href
        )
    }
}
</script>
<style lang="scss">
.cb-footer{
    background-color:#242527;
    .links{
        color:#fff;
        text-decoration: none;
        font-size: 16px;
    }
    .content{
        width: 320px;
        color:#fbfcff;
        display: flex;
        justify-content: space-between;
    }
    .ft-boxhd{
        padding-top: 25px;
        padding-bottom: 25px;
        width: 100%;
        height: 190px;
        // margin-right: 160px;
        // display: flex;
        // justify-content: space-between;
    }
    .ft-line{
        height: 140px;
        width: 1px;
        background-color: #3f4041;
    }
    .ft-one{
        margin-top: 10px;
        color:#fbfcff;
        display: flex;
        justify-content: space-between;
        span{
            cursor: pointer;
            &:hover{
                color: $blue;
            }
        }
    }
    .ft-two{
        // margin-top: 20px;
        color:#ccc;
        display: flex;
        font-size: 14px;
        justify-content: space-around;
        li {
            margin-bottom: 5px;
        }
        .jump-btn{
            cursor: pointer;
            &:hover{
                color: $blue;
            }
        }
        .xf-box{
            margin-left: -20px;
        }
        .gf,.xf{
            color:#fff;
        }
    }
    .ft-three{
        // margin-top: 10px;
        color:#fbfcff;
        display: flex;
        justify-content: center;
        .tel{
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 15px;
            margin-top: 15px;
        }
        .weeked{
            font-size: 14px;
            color: #ccc;
        }
    }
    .imageCenter{
        left: 60%;
        top: 30px;
        position: relative;
        img{
            display: inline-block;
            width: 80px;
            height: 80px;
        }
    }
    .cp-container{
        .ft-main{
            border-top: 1px solid #333;
            padding: 25px 0;
            h6{
                font-size: 22px;
                color: #999;
                margin-bottom: 15px;
            }
            .el-row{
                .el-col-6{
                    // @include word-sign-line;
                    width: auto;
                    display: inline-block;
                    margin-right: 20px;
                    img{
                        width: 20px;
                        height: 20px;
                        position: relative;
                        top:5px;
                        margin-right: 2px;
                    }
                    a,span{
                        color:gray;
                        font-size:14px;
                        display: inline-block;
                        /*min-width: 130px;*/
                        margin-right: 20px;
                        line-height: 24px;
                    }
                    a:hover{
                        span{
                            color: $blue;
                        }
                    }
                }
            }
        }
        .ft-bt{
            color:gray;
            font-size: 14px;
            line-height: 24px;
            padding: 10px;
            border-top:1px solid black;
            text-align: center;
        }
    }
}
</style>
